<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>安徽应急xyz服务展示地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <!--    <script src='../lib/ol6.4.3/ol.js'></script>-->
    <script src="../lib/proj4/proj4.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
    <style>
        .btn {
            position: absolute;
            top: 10px;
            left: 100px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>

    function createMap() {
        const projection = ol.proj.get('EPSG:3857');
        const extent = ol.proj.transformExtent([
            73.44696044921875,
            3.408477306365967,
            135.08583068847656,
            53.5579266177978516
        ], 'EPSG:4326', 'EPSG:3857');
        // console.log(extent);
        projection.setExtent(extent);
        console.log(projection.getExtent());

        /*const tileGrid = new ol.tilegrid.TileGrid({
            // origin: [-2.003750834E7, -2.003750834E7],
            origin: ol.extent.getTopLeft(extent),
            resolutions: [39135.758, 19567.879, 9783.9395, 4891.96975, 2445.984875, 1222.9924375]
        });*/


        // http://112.132.1.107:7777/gisserver/tmsserver/china_tms/5/24/19.png
        const url = `http://112.132.1.107:7777/gisserver/tmsserver/china_tms/{z}/{x}/{-y}.png`;
        const xyzSource = new ol.source.XYZ({
            url,
            projection,
            // tileGrid,
            wrapX: false
            // tileUrlFunction: function (coordinate) {
            //     console.log(coordinate);
            //     return 'http://112.132.1.107:7777/gisserver/tmsserver/china_tms/' + coordinate[0] + '/' +
            //         coordinate[1] + '/' + (-coordinate[2] - 1) + '.png';
            // }
        });
        // 图层
        const baseLayer = new ol.layer.Tile({
            extent,
            source: xyzSource
        });

        // const centerPoint = proj4('EPSG:4326', 'EPSG:3857', points[3]);
        const centerPoint = [11606882.061574157, 3733263.6868846673];

        const iconFeature = new ol.Feature({
            geometry: new ol.geom.Point(centerPoint)
        });

        const iconStyle = new ol.style.Style({
            image: new ol.style.Icon({
                anchor: [10, 26],
                anchorXUnits: 'pixels',
                anchorYUnits: 'pixels',
                src: '../image/position_orange.png'
            })
        });

        iconFeature.setStyle(iconStyle);

        const vectorSource = new ol.source.Vector({
            features: [iconFeature],
            wrapX: false
        });

        const iconLayer = new ol.layer.Vector({
            source: vectorSource
        });

        const map = new ol.Map({
            layers: [
                baseLayer,
                iconLayer
            ],
            target: 'map',
            view: new ol.View({
                center: centerPoint,
                projection,
                zoom: 3,
                maxZoom: 5,
                minZoom: 1
            })
        });

        const clickHandler = evt => {
            console.log(evt);
        };

        map.on('click', clickHandler.bind(this));

        setTimeout(() => {
            map.un('click', clickHandler);
        }, 5000);

    }

    createMap();
</script>
</body>
</html>